<template>
	<!-- 联系客服 -->
	<view class="customerservice-wrap">
		<!-- <view class="customerservice-content mt-60">
			添加客服企业微信
		</view>
		<view class="flex items-center justify-center mb-60 mt-60">
			<up-image :show-loading="true" :src="companyQrCode" width="309px" height="303px" @click="click"></up-image>
		</view>
		<view class="flex items-center justify-center mt-20">
			<up-image :show-loading="true" :src="IMG_URL2+'common/phone-telephone.svg'" width="20px" height="20px" @click="click"></up-image>
			<view class="phonenumber">客服电话:{{ customerMobile?customerMobile:'暂无电话' }}</view>
		</view> -->
		<view class="contact-list">
            <view class="contact-card">
                <text class="contact-text">欧阳佳 13640986794</text>
                <view class="action-buttons">
                    <view class="copy-btn" @click.stop="copyPhone('13640986794')">复制</view>
                    <view class="call-btn" @click.stop="handleCall('13640986794')">拨打</view>
                </view>
            </view>
            <view class="contact-card">
                <text class="contact-text">韦燕 13641459607</text>
                <view class="action-buttons">
                    <view class="copy-btn" @click.stop="copyPhone('13641459607')">复制</view>
                    <view class="call-btn" @click.stop="handleCall('13641459607')">拨打</view>
                </view>
            </view>
            <view class="contact-card">
                <text class="contact-text">晓纯 13418821411</text>
                <view class="action-buttons">
                    <view class="copy-btn" @click.stop="copyPhone('13418821411')">复制</view>
                    <view class="call-btn" @click.stop="handleCall('13418821411')">拨打</view>
                </view>
            </view>
        </view>
	</view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";

import { shopApi } from "@/api";
let companyQrCode = ref('')
let customerMobile = ref('')
const getData=()=>{
	//TODO: 此接口接入了登录校验，需要在后端解除登录校验
	shopApi.SHOPGETCURRENTSHOPINFO().then((res) => {
		if (res.code == 200) {
			companyQrCode.value = res.result.companyQrCode
			customerMobile.value = res.result.customerMobile
		} else {
			uni.showToast({ title: res.errMsg, icon: "none" });
		}

	})
}
// 检查授权状态并处理电话拨打
const handleCall = (phoneNumber) => {
    // 先检查是否已授权
    makeCall(phoneNumber)
    // uni.getSetting({
    //     success: (res) => {
    //         if (res.authSetting['scope.makePhoneCall']) {
    //             // 已授权，直接拨打
    //             makeCall(phoneNumber)
    //         } else {
    //             // 未授权，请求授权
    //             uni.authorize({
    //                 scope: 'scope.makePhoneCall',
    //                 success: () => {
    //                     // 用户同意授权后拨打
    //                     makeCall(phoneNumber)
    //                 },
    //                 fail: () => {
    //                     // 用户拒绝授权，提示打开设置
    //                     uni.showModal({
    //                         title: '提示',
    //                         content: '需要授权才能拨打电话，请在设置中开启权限',
    //                         success: (modalRes) => {
    //                             if (modalRes.confirm) {
    //                                 uni.openSetting({
    //                                     success: (settingRes) => {
    //                                         if (settingRes.authSetting['scope.makePhoneCall']) {
    //                                             makeCall(phoneNumber)
    //                                         }
    //                                     }
    //                                 })
    //                             }
    //                         }
    //                     })
    //                 }
    //             })
    //         }
    //     }
    // })
}
// 执行电话拨打
const makeCall = (phoneNumber) => {
    uni.makePhoneCall({
        phoneNumber: phoneNumber,
        success: () => {
            // console.log('拨打电话成功')
        },
        fail: (err) => {
            // uni.showToast({
            //     title: '拨打电话失败',
            //     icon: 'none'
            // })
            // console.error('拨打电话失败：', err)
        }
    })
}

const copyPhone = (phoneNumber) => {
    uni.setClipboardData({
        data: phoneNumber,
        success: () => {
            uni.showToast({ 
                title: '已复制到剪贴板', 
                icon: 'success',
                duration: 1500
            });
        },
        fail: (err) => {
            console.error('复制失败:', err);
            uni.showToast({
                title: '复制失败，请重试',
                icon: 'none',
                duration: 2000
            });
        },
        complete: () => {
            console.log('复制操作完成');
        }
    });
}
onLoad((options) => {
	getData()
})
</script>

<style lang="scss" scoped>
.customerservice-wrap{
	.customerservice-content{
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-align: center;
	}
	.phonenumber{
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		margin-left: 10rpx;
	}
	
	.contact-list {
		margin: 40rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.contact-card {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			justify-content: space-between;
			
			.contact-text {
				margin-left: 20rpx;
				font-size: 16px;
				color: #333;
				flex: 1;
			}
			
			.action-buttons {
				display: flex;
				gap: 20rpx;
				
				.copy-btn, .call-btn {
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
					font-size: 14px;
				}
				
				.copy-btn {
					background: #f5f5f5;
					color: #666;
				}
				
				.call-btn {
					background: #d68e44;
					color: white;
				}
			}
		}
	}
}

</style>
